<!DOCTYPE html>
<html>
	<head>
		<title>Kwicks Vertical Example</title>

		<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
		<style type='text/css'>
			.kwicks {
				width: 125px;
				height: 415px;
			}
			.kwicks > li {
				width: 125px;
				/* overridden by kwicks but good for when JavaScript is disabled */
				height: 100px;
				margin-top: 5px;
			}

			#panel-1 { background-color: #53b388; }
			#panel-2 { background-color: #5a69a9; }
			#panel-3 { background-color: #c26468; }
			#panel-4 { background-color: #bf7cc7; }
		</style>
	</head>
	
	<body>
		<ul class='kwicks kwicks-vertical'>
			<li id='panel-1'></li>
			<li id='panel-2'></li>
			<li id='panel-3'></li>
			<li id='panel-4'></li>
		</ul>

		<script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
		<script src='../jquery.kwicks.js' type='text/javascript'></script>
		
		<script type='text/javascript'>
			$(function() {
				$('.kwicks').kwicks({
					maxSize : 220,
					spacing : 5,
					behavior: 'menu',
					isVertical: true
				});
			});
		</script>
	</body>
</html>